<template>
  <div class="home">
  <van-list
      class="home"
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <van-cell v-for="item of playlists" :key="item.id">
        <img class="item" v-lazy="item.coverImgUrl" alt="" @click="handleDetail(item.id)">
        <p>{{ item.name }}</p>
      </van-cell>
    </van-list>
  </div>
</template>

<script>

export default {
  name: 'Home',
  data(){
    return{
      playlists:[],
      loading:false,
      finished:false
    }
  },
  methods:{
    handleDetail(id){
      console.log(id);
      this.$router.push(`/detail/${id}`)
    },
    onLoad(){
      var offset = this.playlists.length;
      this.axios.get(`http://122.112.161.135:3000/top/playlist?offset=${offset}&limit=20`).then(res=>{
      console.log(res.data.playlists);
     var playlists = this.playlists.concat(res.data.playlists);
          // var playlists =res.data.playlists
          this.playlists =  playlists;
          this.loading = false;
      })
    }
  }
  
}
</script>
<style scoped>
  .item{
    width: 150px;
    height: 150px;
  }
  .home{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .nav{
    width: 150px;
  }
  .van-cell{
    width: 150px;
  }
</style>
